<template>
  <div class="city" id="map_container"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import {
  initMap,
  snowStyle,
  darkStyle,
  purpleStyle,
  whiteStyle,
} from "./common";
import proj4 from "proj4";
import gcoord from "gcoord";

onMounted(drawMap);

function drawMap() {
  /* global BMapGL */

  /* global mapv */

  /* global mapvgl */

  /* global initMap */

  /* global snowStyle */

  let center = new BMapGL.Point(121.480519, 31.220787);
  var map = initMap({
    heading: 90,
    tilt: 80,
    zoom: 12,
    center,
    // center: [120.23029470193478, 30.239629531776455],
  });
  const mc = BMapGL.Projection.convertLL2MC(center);

  var view = new mapvgl.View({
    // effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],
    map: map,
  });
  var threeLayer = new mapvgl.ThreeLayer({ notUpdateSize: false });
  view.addLayer(threeLayer);

  var lights = [];
  lights[0] = new THREE.PointLight("red", 1, 0);
  lights[0].position.set(0, -1000, 1000);
  threeLayer.scene.add(lights[0]);

  var flyGltf;
  let gltfLoader = new mapvgl.THREELoader.GLTFLoader();
  var geoGroup;
  gltfLoader.load(window.base+"/city.glb", function (obj) {
    flyGltf = obj.scene;
    flyGltf.rotateX((90 / 180) * Math.PI);
    flyGltf.rotateY((20 / 180) * Math.PI);
    flyGltf.scale.x = 500;
    flyGltf.scale.y = 500;
    flyGltf.scale.z = 500;

    geoGroup = new THREE.Group();
    geoGroup.add(flyGltf);
    geoGroup.position.x = mc.lng;
    geoGroup.position.y = mc.lat;
    geoGroup.position.z = 10;
    threeLayer.add(geoGroup);
  });
}
</script>

<style lang="scss" scoped>
.city {
  height: 100%;
}
</style>
